<template>
    <div class="ele-body">
        <el-card shadow="never">
            <el-form
            :model="where"
            label-width="90px"
            class="ele-form-search"
            @keyup.enter.native="reload"
            @submit.native.prevent>
                <el-row :gutter="15">
                    <el-col :lg="12" :md="12">
                        <el-form-item label="生成时间:">
                            <el-date-picker
                                style="width: 100%"
                                v-model="where.create_time"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                label-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="推广员:">
                            <PageSelect
                            :placeholder="'请选择推广员'"
                            v-model="where.promote_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="一级推广员:">
                            <PageSelect
                            :placeholder="'请选择一级推广员'"
                            v-model="where.promote_1_id"
                            :whereName="'realname'"
                            :url="'/userpromote/index?level=1'"
                            :optionLable="'realname'"
                            :optionvalue="'id'"
                            :multiple="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="状态:" prop="status">
                            <el-select
                                clearable
                                v-model="where.status"
                                placeholder="请选择状态"
                                class="ele-fluid"
                            >
                                <el-option label="申请中" :value="0" />
                                <el-option label="已打款" :value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="结算单号:">
                            <el-input
                                :placeholder="'请输入结算单号'"
                                v-model="where.settlement_number"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="12" :md="12">
                        <el-form-item label="银行账户:">
                            <el-input
                                :placeholder="'请输入银行账户'"
                                v-model="where.s_account_name"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <div class="ele-form-actions">
                            <el-button
                                type="primary"
                                icon="el-icon-search"
                                class="ele-btn-icon"
                                size="small"
                                @click="reload"
                                >查询
                            </el-button>
                            <el-button @click="reset" size="small">重置</el-button>
                        </div>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <el-button
                            size="small"
                            @click="exportExcel()"
                        >
                            导出
                        </el-button>
                        <el-button
                                type="primary"
                                icon="el-icon-download"
                                class="ele-btn-icon"
                                size="small"
                                @click="uploadAll()"
                                >批量下载
                            </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 数据表格 -->
            <ele-pro-table
                ref="table"
                :where="where"
                :datasource="url"
                :method="'post'"
                :columns="columns"
                :selection.sync="selection"
                height="calc(100vh - 315px)"
            >
                <!-- 表头工具栏 -->
                <template slot="toolbar">
                    <el-button
                        size="small"
                        type="success"
                        class="ele-btn-icon"
                        @click="setStatus(null)"
                        >打款
                    </el-button>
                </template>
                <template slot="action" slot-scope="{ row }">
                    <el-button
                        size="small"
                        type="primary"
                        class="ele-btn-icon"
                        @click="setRevoke(row)"
                        v-if="row.status==1"
                        >撤回
                    </el-button>
                    <el-button
                        size="small"
                        type="success"
                        class="ele-btn-icon"
                        @click="setStatus(row)"
                        v-if="row.status==0"
                        >打款
                    </el-button>
                    <el-button
                        size="small"
                        class="ele-btn-icon"
                        @click="uploadRow(row)"
                        >下载
                    </el-button>
                </template>
            </ele-pro-table>
        </el-card>
    </div>
</template>
<script>
import PageSelect from "@/components/pageSelect/index.vue";
import {downloadExcel} from "@/utils/excel-export";
export default{
    components:{PageSelect},
    data(){
        return{
            where:{},
            selection:[],
            url:'/Settlementstatement/index',
            columns:[
                {
                    columnKey: "selection",
                    type: "selection",
                    width: 45,
                    align: "center",
                    fixed: "left"
                },
                {
                    prop: "settlement_number",
                    label: "结算单号",
                    width: 200,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "promote_account",
                    label: "结算推广员",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "promote_1_account",
                    label: "一级推广员",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "sum_money",
                    label: "结算金额",
                    width: 120,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "s_account_name",
                    label: "银行账户名称",
                    width: 160,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "s_account",
                    label: "银行账户",
                    width: 200,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "s_bank_account",
                    label: "开户行",
                    width: 200,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    prop: "status",
                    label: "状态",
                    showOverflowTooltip: true,
                    minWidth: 200,
                    align: "center",
                    formatter: (row, column, cellValue) => {
                        if (cellValue == 0) {
                        return "申请中";
                        } else if (cellValue == 1) {
                        return "已打款";
                        }
                    }
                },
                {
                    prop: "create_time",
                    label: "生成时间",
                    width: 160,
                    align: "center",
                    showOverflowTooltip: true,
                },
                {
                    columnKey: "action",
                    label: "操作",
                    width: 150,
                    align: "center",
                    resizable: false,
                    slot: "action",
                    fixed: "right"
                }
            ]
        }
    },
    created(){
        
    },
    mounted(){

    },
    methods:{
        //批量下载
        uploadAll(){
            if(!this.selection||this.selection.length==0){
                this.$message.warning('请选择需要下载的数据!')
                return false
            }
            let ids=[]
            this.selection.forEach(item=>{
                ids.push(item.id)
            })
            ids=ids.join(',')
            window.location.href = `${process.env.VUE_APP_API_BASE_URL} Settlementstatement/downStatementAll?ids={`+ids+`}`
        },
        //导出
        exportExcel(){
            downloadExcel(`Settlementstatement/export`, this.where)
        },
        //下载
        uploadRow(row){
            window.location.href = `${process.env.VUE_APP_API_BASE_URL}Settlementstatement/downStatement?id={`+row.id+`}`
        },
        //打款
        setStatus(row){
            let ids=[]
            if(row){
                ids.push(row.id)
            }else{
                if(this.selection&&this.selection.length>0){
                    this.selection.forEach(item=>{
                        ids.push(item.id)
                    })
                }else{
                    this.$message.warning('请选择需要打款的数据!')
                    return false;
                }
            }
            this.$http.post('/Settlementstatement/setStatus',{id:ids}).then(res=>{
                    if(res.data.code === 0){
                        this.$message.success('打款成功!')
                        this.reload()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
        },
        //撤回
        setRevoke(row){
            this.$confirm('确定要撤回当前对账单吗?', '提示', {
                type: 'warning'
            }).then(()=>{
                this.$http.post('/Settlementstatement/setRevoke',{id:row.id}).then(res=>{
                    if(res.data.code === 0){
                        this.$message.success('撤回成功!')
                        this.reload()
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            })
        },
        /* 刷新表格 */
        reload() {
            this.$refs.table.reload({where: this.where});
        },
        /* 重置搜索 */
        reset() {
            this.where = {};
            this.reload();
        },
    }
}
</script>
<style scoped>
</style>